import React from 'react';
import Toast from 'antd-mobile/lib/toast';
import { fetchReturnApplyApi,
  fetchOrderDetailApi,
  fetchValidateordersnApi,
  fetchReturnmoneyApi,
} from '../api' ;
import RefundForm from './RefundForm';
import './index.less';

export default class Refund extends React.PureComponent {
  state = {
    resData: { productlist: [], sndata: [] },
    returnProductMoney: 0
  }

  refundData = {
    return_image_ids:[],
    quantity:1,
    return_sn_ids:''
  }

  imgIdChange(id){
    this.refundData.return_image_ids.push(id);
  }

  fetchValidateordersn = (data) => {
    return fetchValidateordersnApi(data).then((res)=>{
      return res;
    })
  }

  hanldeClick = async () => {
    const data = this.refundData;
    data.return_image_ids =  data.return_image_ids && data.return_image_ids.join();
    // if(data.return_sn_ids && data.return_sn_ids.split(',').length != data.quantity){
    //   Toast.fail('退货数量与产品机身号数量不匹配');
    //   return;
    // }
    if(!data.return_reason_id){
      Toast.fail('请选择退款原因！');
      return;
    }
    fetchReturnApplyApi(data).then((res)=>{
      if(res.code === 1000){
        Toast.success('操作成功！')
        __self.history.push('/account/sales-service')
      }
      if(res.code === 10012){
        Toast.fail('产品机身号错误！');
      }
    });
  }

  componentDidMount(){
    const { id, index } = this.props.match.params;

    fetchOrderDetailApi({ order_id: id}).then((res)=>{
      if (res.code === 1000) {
        this.setState({ resData: res.data });
        this.refundData.order_id = id;
        const pro = res.data.productlist[index] || {};
        const groupbuy = pro.groupbuyproductlist ? [pro, ...pro.groupbuyproductlist] : [];
        if (groupbuy.length) {
          this.refundData.quantity = groupbuy.length;
          this.refundData.product_ids = groupbuy.map((pro) => { return [pro.product_id] }).join(',');
        } else {
          this.refundData.quantity = pro.quantity_can_return;
          this.refundData.product_ids = res.data.productlist[index].product_id;
        }

        fetchReturnmoneyApi({ order_id: id, product_ids: this.refundData.product_ids }).then(res => {
          if (res.code === 1000) {
            this.setState({ returnProductMoney: res.data.return_product_money });
          }
        })
      }
    });
  }

  formChange (key,val) {
    this.refundData[key] = val;
  }

  logisticsChange(key,val){
    this.logisticsData[key] = val;
  }

  render() {
    const { index } = this.props.match.params;
    const { resData, returnProductMoney } = this.state;
    const pro = resData.productlist[index] || {};
    const groupbuy = pro.groupbuyproductlist ? [pro,...pro.groupbuyproductlist] : [];


    return (
      <div className="account-block refund">
        <div className="account-block__title">
          售后服务
        </div>
        <div className="account-block__content ">
          <div className="order-number">
            <span>退货商品   订单号：{resData.order_no}</span>
          </div>
          {
            groupbuy.length ?
              groupbuy.map((gr, gi)=>(
                <div className="order__product" key={gi}>
                  <div className="order__img">
                    <img src={gr.image} alt="" />
                  </div>
                  <div className="order__title">
                    <p>
                      <span className="order__brand">佳能</span>
                      （Canon）{gr.title}
                    </p>
                    <div className="order__num">{gr.quantity}件</div>
                  </div>
                </div>
              )) :
              <div className="order__product">
                <div className="order__img">
                  <img src={pro.image} alt="" />
                </div>
                <div className="order__title">
                  <p>
                    <span className="order__brand">佳能</span>
                    （Canon）{pro.title}
                  </p>
                  <div className="order__num">{pro.quantity}件</div>
                </div>
              </div>
          }
          <RefundForm
            data={resData}
            item={pro}
            formChange={(key,val)=>this.formChange(key,val)}
            imgIdChange={(id) => { this.imgIdChange(id) }}
            returnProductMoney={ returnProductMoney }
          />
          <div className="button-container">
            <span className="button" onClick={this.hanldeClick}>提交</span>
          </div>
        </div>
      </div>
    )
  }
}